<template>
  <p class="mi-notice" v-text="text"></p>
</template>

<script>
    export default {
      name:"MiNotice",
      data(){
        return{text:''}
      },
      mounted(){
        setTimeout(()=>{
          this.$destroy(true);
          document.body.removeChild(this.$el)
        },1000)
      }
    }
</script>

<style scoped>
@keyframes hide {
  from{opacity: 1;top:100px}
  to{opacity: 0;top:-300px}
}
p.mi-notice{
  position: fixed;
  top:100px;
  left:50%;
  transform:translateX(-50%);
  width: 80vw;
  padding: 10px;
  background-color: #b0b0b0;
  text-indent: 2em;
  animation-name: hide;
  animation-duration: 2s ;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}
</style>